Ant Design Pro

大象笔记 > 标签 > Ant Design Pro

Antd Pro 加入富文本编辑器

需求 能方便整合入 Ant Design Form 中 能支持,或者方便扩展,将富文本编辑器中的图片上传至七牛云存储中 备选方案列表 Ant Design 官方推荐了两个: https://ant.design/docs/react/recommendation-cn React Quill。首选推荐。测试了一圈,确实这个最靠谱。 Braft Editor。有 Ant Design 的集成说明文档:https://braft.margox.cn/demos/antd-upload 安装 Braft Editor tyarn add braft-editor 参考文档: https:/ ...

阅读全文...

Antd Pro 中嵌入多折线图表

安装 Ant Design Charts 依赖 参考 https://charts.ant.design/zh-CN/guide/start tyarn add @ant-design/charts 多数据曲线 Ant Design Charts 并没有给出同一图表多条曲线的配置方法。 查了一下,Ant Design Charts 是基于 G2Plot 的,所以看一下 G2Plot 的文档。 Ant Design Charts 是 G2Plot 的 React 版本,基于 React、TypeScript 封装了所有的 G2Plot 图表,继承了 G2Plot 的所有配置,对 React ...

阅读全文...

antd pro 通过后台接口异步加载 select 数据

想在 Ant Design Pro 后台中,通过后台接口异步加载 Select 的选项,例如文章的作者。 思路 react effect hook 拉取数据,但是如何保证只在加载时运行一次,而不是结束时还运行一次。实际上用中括号就没有这个烦恼,不指定返回的匿名函数就可以。 获取的数据,如何传递给 select 组件。使用 useState Show me the code: 以 Antd Pro 代码为例 例如下拉选择文章的作者: 引入依赖 import React, {useState, useEffect} from 'react'; import {getAuthors} fro ...

阅读全文...

Ant Design Form 表单一个字段是否展示取决于另一个字段的值

需求 我想在 Ant Design Pro 管理后台页面中实现这样一个功能: 统一的系统配置项管理 新增配置项时,需要选择配置项类型:例如字符串、图片、富文本 根据字段类型,分别展示不同的对应 Ant Design 组件:例如 Input 输入框,图片上传组件,富文本编辑组件 这就需要根据类型字段,动态地显示不同的字段。 getFieldValue 搜到需要使用 getFieldValue 来获取依赖字段的当前值,以此为依据来判断该显示不同的组件。 用 github 搜到一段示例代码: https://github.com/SANGET/custom-platform-tool/blob/ ...

阅读全文...

ant design pro 前端权限管理,显示不同的菜单

配置其实很简单,奈何 Ant Design Pro 文档写的有点晦涩,且代码不是最新的 Ant Design Pro 5。 整理了一下。 真实场景是,总部管理员与代理商登录后台看到的功能模块不一样,即左侧菜单显示不同。 需要修改三个地方: src/access.ts return 中添加各种权限配置。 currentUser 为调用后台的用户信息查询接口。 export default function access(initialState: { currentUser?: API.CurrentUser | undefined }) { const { currentUser } = ...

阅读全文...

代理商管理系统后台

系统架构 代理商与总部使用独立的后台,即两套 ant design pro 前端,但是后台使用同一个 golang gin 后台? 使用同一个前端,分权限的可能性: [X] 省去了两个子域名跨域的麻烦 [X] 登录界面增加角色选项:代理商 / 总部 [X] 针对不同角色,login 接口赋值不同的 token role [X] jwt token 增加 role 字段 [X] 测试是否会影响原管理员登录 [X] golang gin auth middleware 增加角色参数,区分权限校验 [X] currentUser 接口兼容两种角色 [X] [ant design pro 前端 ...

阅读全文...

Antd Pro V5 使用 Nginx 部署到线上生产服务器

执行 tyarn build 完成后,会看到 Antd Pro 项目根目录下多了个 dist 目录。这个即是打包好的线上代码。 从 package.json 可以看到 build 对应的实际命令: "build": "umi build", 将 dist 目录 scp 到生产服务器上,然后增加 nginx 配置: location / { root /home/path_of_project/dist; index index.html index.htm; try_files $uri $uri/ /index.htm ...

阅读全文...

修改 Antd Pro V5 加载时的 title 及 logo

虽然修改了 Antd Pro V5 的全局 title,但是在加载时,还没有完全加载完的时候, 还是显示的 Ant Design Pro 的标题。 解决方法: 修改 Antd Pro V5 加载时的 title 打开:src/pages/document.ejs 修改里面的 title 部分。 .ejs 是什么格式? Embedded JavaScript templating. 看起来就是一种 JS 的模板格式。 favicon.ico 在哪里替换 public 目录 login 页面的 logo > grep logo.svg -r src/ src/pages/user/Login ...

阅读全文...

Ant Design Cascader 级联组件选择省市

需求 只需要省市二级选择,而不需要省市区。 网上不少示例使用的是 Ant Design select,实际上用 Cascader 级联选择组件更合理。 最终效果: Ant Design Cascader 级联选择组件 https://ant.design/components/cascader-cn/ 从文档看,label 是可选项,猜测不写 label 则同 value。 interface Option { value: string | number; label?: React.ReactNode; disabled?: boolean; children?: Opt ...

阅读全文...

Antd Pro 数据汇总结果展示

例如,我要在数据后台拉取一段时间的代理商交易记录,并进行金额数据合计。 展现形式 可以使用 Antd Pro ProTable 的"表格主体自定义",该区域在 table 列表的上方,更醒目一些。 https://procomponents.ant.design/components/table#%E8%A1%A8%E6%A0%BC%E4%B8%BB%E4%BD%93%E8%87%AA%E5%AE%9A%E4%B9%89 相对 Ant Design Table 的"总结栏","表格主体自定义" 格式更灵活,更醒目。 关键的一点是,Pr ...

阅读全文...

Antd Pro 数据导出 Excel

按钮放在哪里 如 Antd Pro 示例中,放在过滤设置区域还挺合适的。因为导出 Excel 需要遵循过滤条件,如时间段,类型等。 https://procomponents.ant.design/components/table#%E8%A1%A8%E5%8D%95%E6%93%8D%E4%BD%9C%E8%87%AA%E5%AE%9A%E4%B9%89 button or link link 容易实现吧,target 设置一下,在新 tab 页中下载。 可以确认一下,Ant Design 有没有体验更好的组件。之前用过 Ant Design 的上传组件不错。 Ant Design 中 Bu ...

阅读全文...

Antd Pro Beta2 项目在 clone 之后 tyarn start 报错

开发时倒是好好的,但是再次 clone 到不同目录,或者其他电脑上 clone 之后,先 tyarn 安装依赖,然后 tyarn start 报错: > tyarn start yarn run v1.22.10 $ cross-env UMI_ENV=dev umi dev Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db Why you should do it regularly: https://github.com/browserslist/brows ...

阅读全文...

Antd Pro V5 编辑/新建,数据串了的 bug

Bug 现象 在 Antd Pro V5 数据列表页,点击编辑某个条目,去掉某个字段的内容,保存。 再点击新建,还是编辑的上一条信息。 这时点击保存,实际上是覆盖了上一条的信息,而不是新建了一条信息。 这个问题,之前也有发现过,但是一直没有找到复现的方法。一些用户反馈的复现方法也不好使。 这次好不容易发现了重现步骤,看来是 100% 出现的严重 bug,必须修复一下。 问题定位 又试了几种操作流程: 编辑,然后取消,不保存。再点击新建。一切正常,数据没有串。 点击编辑,再编辑另一条。也正常。 猜测是新建条目并保存之后,全局的 currentRow 没有重置。 const [currentR ...

阅读全文...

Ant Design DatePicker 日期选择组件的时间格式化

组件返回的日期格式问题 antd 选择日期的控件 DatePicker 是输出的 moment 对象,如: Date: "2022-03-10T03:33:14.737Z" 解决办法: // 在 CreateForm 的 onFinish 里加上 if (value.Date) { value.Date = moment(value.Date).format('YYYY-MM-DD'); } 服务器返回日期字符串的解析问题 Uncaught TypeError: date.clone is not a function 解决办法: // 编辑按钮的点击事件里, ...

阅读全文...

nginx 部署 antd pro 在非根目录报 404 错误

例如,使用 antd pro 开发的网站管理后台,在服务器部署时,想部署在 /admin 这种非根目录。根目录留给 go gin 的路由处理。 在 nginx 里按照正常 root 配置,访问时会报 404 错误。 config/config.ts 配置方法 需要修改 antd pro 的配置文件: config/config.ts 添加配置: publicPath: '/admin/', base: '/admin/', 打包目录 打包之后,上传服务器,解压后,将 dist 重命名为 admin。 nginx 配置 location /admin { alias /some/path/f ...

阅读全文...